<template>
  <a-modal @cancel="close" title="退保" width="45vw" :visible="visible" unmount-on-close>
    <!-- 交强险 -->
    <div class="insure-refund-content">
      <page-form :model="form" ref="formRef" layout="vertical">
        <page-form-row :gutter="20">
          <page-form-item label="车牌号" size="1/2">{{ record.licenseNo || '-' }}</page-form-item>
          <page-form-item label="车辆当前归属门店" size="1/2">{{ record.carSiteName || '-' }}</page-form-item>
          <page-form-item label="保险单关联门店" size="1/2">{{ record.siteName || '-' }}</page-form-item>
          <page-form-item label="退保时间" field="backDate" size="1/2" required :rules="{ required: true, message: '请选择退保时间' }">
            <i-date-picker v-model="form.backDate" :disabled-date="disabledDate" class="w-full" />
          </page-form-item>
          <page-form-item label="退保金额" field="backAmount" size="1/2">
            <i-input-number v-model="form.backAmount" />
          </page-form-item>
        </page-form-row>
      </page-form>
    </div>
    <template #footer>
      <a-button @click="close">关闭</a-button>
      <a-button type="primary" @click="saveFn">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup name="InsureRefundModal">
  import { ref } from 'vue'
  import { refundInsure } from '@/api/asset/carInsure.js'
  import { Message, Modal } from '@arco-design/web-vue'
  import dayjs from 'dayjs'
  // emit 事件
  const emit = defineEmits(['ok'])
  const visible = ref(false)
  // 修改
  const form = ref({})
  const record = ref({})
  const open = (recordInfo) => {
    record.value = recordInfo
    form.value.id = recordInfo.id
    visible.value = true
  }
  // 关闭
  const close = () => {
    visible.value = false
    form.value = {}
  }
  const disabledDate = (current) => {
    const endDate = record.value.endDate
    if (endDate) {
      return dayjs(current).isAfter(dayjs(endDate).subtract(1, 'day'))
    }
    return []
  }
  // 保存
  const formRef = ref()
  const saveFn = () => {
    formRef.value.validate((error) => {
      if (!error) {
        Modal.confirm({
          title: '确认退保',
          simple: true,
          cancelText: '取消',
          okText: '确认',
          bodyStyle: {
            'text-align': 'center',
          },
          content: '退保后，不支持恢复，是否确认退保？',
          onBeforeOk: async (done) => {
            await refundInsure(form.value)
            Message.success('退保成功')
            emit('ok')
            close()
            done()
          },
        })
      }
    })
  }
  defineExpose({
    open,
  })
</script>
<style lang="less" scoped>
  .insure-refund-content {
    overflow-x: hidden;
  }
</style>
